﻿<!DOCTYPE html>
<html>
<head>
<title>第九师水利一张图</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Trendy Tab Login Form template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />

<!-- Custom Theme files -->
<link href="./css/LoginStyle.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="icon" type="image/png" href="img/area-2.png">
	<!--引入 element-ui 的样式，-->
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- //Custom Theme files -->
	<style>
		h1 {
			color: #0000009c;
			font-weight: 500;
		}
		.loginIcon{
			font-size: 21px;
		}
		.login-form .login-agileits-top.sign-up input[type="submit"] {
			margin-top: 2em;
		}
		.resp-tabs-container{
			height: 387.19px;
		}
		.loginButton{
			display: block;
			width: 100%;
			background-color: #1c4eda;
			border-color: #1c4eda;
			font-size: 1em;
		}
		.loginButton:hover, .loginButton:focus{
			background-color: #1c4eda7d;
			border-color: #1c4eda;
			color: #FFF;
		}
		.el-checkbox__inner{
			width: 18px;
			height: 18px;
		}
		.el-checkbox{
			padding:0px !important;
		}
		.el-checkbox__input.is-checked+.el-checkbox__label {
			color: #fff;
		}
		.login-agileits-top .el-checkbox__inner::after {
			height: 11px;
			left: 6px;
			top: 0px;
		}
		.regissterButton{
			margin:2.5em 0 0 0;
		}


	</style>
</head>
<body>
	<!-- main -->
	<div class="main">
		<h1>第九师水利一张图</h1>
		<div class="login-form" id="app_1">
			<div class="sap_tabs w3ls-tabs">
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list">
						<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>登录</span></li>
						<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><label>/</label><span>注册</span></li>
					</ul>
					<div class="clear"> </div>
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
							<div class="login-agileits-top">
								<form action="#" method="post">
									<p>用户名 </p>
									<el-input
											placeholder="请输入用户名:admin"
											v-model="userName">
										<i slot="prefix" class="el-input__icon el-icon-user-solid loginIcon"></i>
									</el-input>
									<p>密码</p>
									<el-input
											placeholder="请输入密码:123456"
											show-password
											v-model="passWord">
										<i slot="prefix" class="el-input__icon el-icon-unlock loginIcon"></i>
									</el-input>
									<input type="checkbox" id="brand" value="">
									<el-checkbox v-model="rememberPassWord">记住密码</el-checkbox>
									<el-button class="loginButton" type="primary" @click="handleLogin">登录</el-button>
								</form>
							</div>
							<div class="login-agileits-bottom">
								<p><a href="#">忘记密码?</a></p>
							</div>
						</div>
						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
							<div class="login-agileits-top sign-up">
								<form action="#" method="post">
									<p>用户名</p>
									<el-input
											placeholder="请输入用户名"
											v-model="userNameRegister">
										<i slot="prefix" class="el-input__icon el-icon-user-solid loginIcon"></i>
									</el-input>
									<p>邮箱</p>
									<el-input
											placeholder="请输入邮箱"
											v-model="emailRegister">
										<i slot="prefix" class="el-input__icon el-icon-message loginIcon"></i>
										<template slot="append">.com</template>
									</el-input>
									<p>密码</p>
									<el-input
											placeholder="请输入密码"
											show-password
											v-model="passWordRegister">
										<i slot="prefix" class="el-input__icon el-icon-unlock loginIcon"></i>
									</el-input>
									<el-button class="loginButton regissterButton" type="primary" @click="handleRegister" >注册</el-button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //main -->
	<!-- copyright -->
	<div class="copyright">
		<p> © 2021 新疆兵团勘测设计院（集团）有限责任公司 | <a href="#" title="操作手册">操作手册</a></p>
	</div>
	<!-- //copyright -->

	<!-- js -->
	<!-- 必须先引入vue，  后使用element-ui -->
	<script src="vue-dev/dist/vue.js"></script>
	<!-- 引入element 的组件库-->
	<script src="element-ui/lib/index.js"></script>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/easyResponsiveTabs.js" type="text/javascript"></script>
	<script src="./js/login.js" type="text/javascript"></script>
	<!-- //js -->

</body>
</html>
